<template>
  <student_Home/>
  <div class="container">
  <div class="questionaryForm">
    <h1>培训情况调查表</h1><br>
    <h5>亲爱的学员们：</h5>
    <h5>&nbsp;&nbsp;&nbsp;&nbsp;感谢您对课程的支持和配合，为了了解您培训后的感受，使我们日后的培训更加实用和有针对性，请您对课程、授课老师提出宝贵建议，帮助我们有更大进步。</h5>
  <form>
    <span>课程ID：</span>
    <input type="text" v-model="lectureId" id="lecture" class="box"><br/>
    <span>课程评分：</span>
    <input type="radio" value="1" id="lectureScore1" name="lectureScore" v-model="lectureScore"/>
    <label for="lectureScore1">非常不满意</label>
    <input type="radio" value="2" id="lectureScore2" name="lectureScore"   v-model="lectureScore"/>
    <label for="lectureScore2">有些不满意</label>
    <input type="radio" value="3"   id="lectureScore3" name="lectureScore"  v-model="lectureScore"/>
    <label for="lectureScore3">还行</label>
    <input type="radio" value="4"  id="lectureScore4" name="lectureScore"  v-model="lectureScore"/>
    <label for="lectureScore4">比较满意</label>
    <input type="radio" value="5"  id="lectureScore5" name="lectureScore"  v-model="lectureScore"/>
    <label for="lectureScore5">非常满意</label><br>
    <span>讲师评分：</span>
    <input type="radio" value="1" id="teacherScore1" name="teacherScore" v-model="teacherScore"/>
    <label for="teacherScore1">非常不满意</label>
    <input type="radio" value="2" id="teacherScore2" name="teacherScore"   v-model="teacherScore"/>
    <label for="teacherScore2">有些不满意</label>
    <input type="radio" value="3"   id="teacherScore3" name="teacherScore"  v-model="teacherScore"/>
    <label for="teacherScore3">还行</label>
    <input type="radio" value="4"  id="teacherScore4" name="teacherScore"  v-model="teacherScore"/>
    <label for="teacherScore4">比较满意</label>
    <input type="radio" value="5"  id="teacherScore5" name="teacherScore"  v-model="teacherScore"/>
    <label for="teacherScore5">非常满意</label>
    <br><span class="textabout">评价内容：</span>
    <textarea v-model="evaluateContent" plasceholder=" "></textarea>
    <br>
    <div class="Btn">
          <button class="submitBtn btn" type="button" @click="handleAdd">提交问卷</button>
          <!-- <button class="returnBtn btn">返回主页</button> -->
          <router-link :to="'/student_Home'" class="btn">
            <a class="returnBtn">返回主页</a>
          </router-link>
    </div>
  </form>
  </div>
</div>
</template>


<script>
import {VueElement, ref} from 'vue'
import axios from 'axios'
import student_Home from "./student_Home.vue"

  //设置表格默认值

  // var lectureId=ref('')
  // var teacherScore=ref('')
  // var lectureScore=ref('5')
  // var evaluateContent=ref('')


  export default{
    components: {
    'student_Home': student_Home
  },
    data(){
      return{
        lectureId:'',
        teacherScore:'',
        lectureScore:'',
        evaluateContent:'',
      }
    },
    methods:{
      handleAdd(){
        let that = this;
        axios
        .post('/api/questionnaire/add',{
          evaluateContent:that.evaluateContent,
          lectureId:that.lectureId,
          lectureScore:that.lectureScore,
          teacherScore:that.teacherScore,

        })
        .then(res =>{
          if(res.status==200){
            alert('添加成功')
            console.log(res)
            this.$router.push('/student_Home');
          }
        })
        .catch(err => {
          alert('添加失败')
          console.log(err.message)
        });
      }
    }
  }
</script>

<style lang="css" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  position: absolute;
  top: 0;
  /* left: 0; */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  background: url('../assets/image/5b5bb3f14863b.jpg');
  background-size: cover;
}
.questionaryForm{
    position: absolute;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: justify;
    /* display: flex; 
     align-items: center;
    justify-content: space-between; */
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px;
    backdrop-filter: blur(5px);
  }
  .questionaryForm h1{
    text-align: center;
  }
  .questionaryForm .box{
    outline: none;
    /* border: none; */
    border: 1px;
    border-color: #bab4b4;
    border-radius: 5px;
    height: 25px;
    font-size: 15px;
  }

  .questionaryForm textarea{
    margin: 10px 0;
    outline: none;
    /* border: none; */
    border: 1px;
    border-color: #bab4b4;
    border-radius: 5px;
    height: 100px;
    width: 400px;
    font-size: 15px;
  }

  .questionaryForm span,input,label{
    margin: 10px 0;
  }

  .questionaryForm .textabout{
    position: relative;
    top: -55px;
  }

  .questionaryForm textarea{
    outline: none;
    /* border: none; */
  }

.Btn{
  display: flex;
  justify-content: center;
}

.Btn .btn{
  margin: 50px;
  font-size: 20px;
}

.Btn .submitBtn{
  margin: 50px;
  padding: 10px;
}

.Btn button{
  border-color: transparent;
  background-color: #bac34e;
  color: #fff;
}

.Btn button:hover{
  border-color: transparent;
  background-color: #222222;
  color: #fff;
  cursor: pointer;
}

.Btn a{
  text-decoration: none;
  /* width: 100px;
  height: 50px; */
  border: solid;
  transition: 0.5 linear;
  overflow: hidden;
  border-color: transparent;
  background-color: #bac34e;
  color: #fff;
  font-size: 20px;
  padding: 5px;
}
.Btn a:hover{
  border-color: transparent;
  background-color: #222222;
  color: #fff;
}

</style>